(function(){
  //实现导航栏的滑动
  // window.onload = function(){
  //   swipe();
  // }
  function swipe(){
      var parent = document.querySelector('.title');
      var child = parent.querySelector('ul');
      var num =  parent.querySelectorAll('ul li');
      var liWidth = parent.querySelector('ul').children[0].offsetWidth;
      var parentWidth = parent.offsetWidth;
      // console.log(num.length);
      var childWidth =(num.length-1)*liWidth;
      var maxX = 0;
        /*translateX 滑动到最下面的定位 其实就是最小定位 父容器高度-子容器高度*/
       var minX =parentWidth-childWidth;
      var currX = 0;
      var setTranslate = function(X){
        child.style.left = ""+X+"px";
        
      }
      child.addEventListener('touchstart',function(e){
        startX = e.touches[0].clientX;
    });
      child.addEventListener('touchmove',function(e){
        moveX = e.touches[0].clientX;
        distanceX = moveX-startX;
        console.log(minX);
        /*清除过度*/
        /*设置定位*/
        /*第二步 2.当滑动到一定的距离的时候不能滑动  滑动区间*/
        /*当前要做定位的位子需要在滑动区间内*/
        if((currX + distanceX) < maxX &&　(currX + distanceX) > minX){
            setTranslate(currX + distanceX);
        }
         
    });
       child.addEventListener('touchend',function(e){
         currX = currX + distanceX;
       })
  }
  $.ajax({
     url:"http://192.168.23.25:3000/api/getbaicaijiatitle",
    type:'get',
    datatype:'jsonp',
    success:function(data){
      var html = template('freetitle',data);
      $("#ftitle").html(html);
      swipe();
      //设置默认情况
      $("#ftitle li:first").addClass('xuanzhong');
      $.ajax({
          url:"http://192.168.23.25:3000/api/getbaicaijiaproduct?titleid=0",
          type:'get',
          datatype:'jsonp',
          success: function(data){
                var html = template("fcontent",data);
                $("#bcontent").html(html);
          }
        })  
      $("#ftitle").find("li").click(function(){
        var id = $(this).attr("data-id");
        swipe();
        //排他渲染字体是红色
       console.log(this);
       $(this).addClass('xuanzhong').siblings().removeClass("xuanzhong");
        $.ajax({
          url:"http://192.168.23.25:3000/api/getbaicaijiaproduct?titleid="+id+"",
          type:'get',
          datatype:'jsonp',
          success: function(data){
                var html = template("fcontent",data);
                $("#bcontent").html(html);
          }
        })
      })
  }
  })
})()
